<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/style.css?1001" rel="stylesheet" />
		<script src="../../js/flexible.js"></script>
		<script src="../../js/flexible_css.js"></script>
		<script src="../../js/jquery-1.9.1.min.js"></script>
		<script src="../../js/axios-proxy.js"></script>
		<script src="../../conf.js"></script>
		<script src="../../js/api.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="refreshContainer" v-cloak>
			<div class="mui-slider">
				<div class="mui-slider-group">
					<div class="mui-slider-item"><a href="#"><img src="../../images/banner.png" /></a></div>
				</div>
			</div>
			<!-- 中部菜单 -->
			<div class="custom-nav" id="custom-nav">
				<ul class="custom-nav-ul">
					<li @click="listopen('../earning-commission.html')">
						<img src="../../images/icon_earning.png">
						<span class="">如何赚佣</span>
					</li>
					<li @click="listopen('../spread-code.html')">
						<img src="../../images/icon_spread.png">
						<span class="">推广二维码</span>
					</li>
					<li @click="listopen('../recharge-member.html')">
						<img src="../../images/icon_member.png">
						<span class="">联盟会员</span>
					</li>
					<li @click="listopen('../mall-home.html')">
						<img src="../../images/icon_mall.png">
						<span class="">商城</span>
					</li>
					<li @click="listopen('../task-hall.html')">
						<img src="../../images/icon_task.png">
						<span class="">任务大厅</span>
					</li>
				</ul>
			</div>
			<!--喇叭-->
			<div class="custom-horn clearfix">
				<span class="custom-icon-horn"></span>
				<span class="custom-horn-msg">凡首次充值用户，均可获得5元无门槛代金券 ！</span>
			</div>
			<!--特价秒杀-->
			<div class="custom-offer">
				<dl class="custom-offer-dl">
					<dt class="clearfix">
						<span>每日特价好货</span>
						<a href="">更多..</a>
					</dt>
					<dd v-for="inter in specialOfferlist" @click="customnav(inter.num_iid,inter.coupon_click_url,inter.coupon_info)">
						<!-- <a href=""> -->
							<img :src="inter.pict_url" alt="">
							<span class="commodity-title" style="height: 0.93333rem; overflow: hidden;line-height: 0.4rem;">
								{{inter.title}}
							</span>
							<span class="commodity-coupon">{{inter.coupon_info}}</span>
							<span class="commodity-price">￥{{inter.zk_final_price}}</span>
							<span class="commodity-reduce">{{inter.reserve_price}}</span>
						<!-- </a> -->
					</dd>
				</dl>
			</div>
			<!--广告图-->
			<div class="adsense">
				<img src="https://hepangzi.top/images/banner1.png" alt="">
			</div>
			<!--精选-->
			<div class="custom-offer">
				<dl class="custom-offer-dl">
					<dt class="clearfix">
						<span>每日精选</span>
						<a href="">更多..</a>
					</dt>
				</dl>
				<!--商品-->
				<ul class="custom-offer-commodity">
					<li href="mall-home-details.html" @click="customnav(inter.num_iid,inter.coupon_click_url,inter.coupon_info)" class="clearfix" v-for="inter in mallCommoditylist">
						<img :src="inter.pict_url" alt="">
						<div class="selected-commodity-content">
							<h6 class="selected-commodity-title">
								{{inter.title}}
							</h6>
							<span class="commodity-price selected-commodity-price">￥{{inter.zk_final_price}}</span>
							<span class="commodity-reduce selected-commodity-shan-price">{{inter.reserve_price}}</span>
							<span class="commodity-sold">已售{{inter.volume}}</span>
							<span class="commodity-coupon selected-commodity-coupon">{{inter.coupon_info}}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="../../js/mui.js"></script>
		<script type="text/javascript">
			//主列表点击事件
			let vm = new Vue({
				el: "#refreshContainer",
				data: {
					mallCommoditylist: [],
					specialOfferlist:[],
					pageSize: 20
				},
				created: function() {
					this.getSpecialOffer();
					mui.init({
						pullRefresh: {
							container: '#refreshContainer', //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
							down: {
								style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
								color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
								height: '50px', //可选,默认50px.下拉刷新控件的高度,
								range: '100px', //可选 默认100px,控件可下拉拖拽的范围
								offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
								auto: true, //可选,默认false.首次加载自动上拉刷新一次
								callback: this.getmallCommodity //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							},
							up: {
								height: 50, //可选.默认50.触发上拉加载拖动距离
								auto: false, //可选,默认false.自动上拉加载一次
								contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
								contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
								callback: this.getmallCommodity //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							}
						}
					});
				},
				methods: {
					getSpecialOffer: function() {
						getcommodity({
							pageSize: 2,
							subordinate:1,
						}, function(res) {
							// vm.codemsg = res.result;
							vm.specialOfferlist = res.results.uatm_tbk_item;
						})
					},
					getmallCommodity: function() {
						this.pageSize += 10;
						getcommodity({
							pageSize: this.pageSize,
							subordinate: 0,
						}, function(res) {
							// vm.codemsg = res.result;
							vm.mallCommoditylist = res.results.uatm_tbk_item;
							vm.$nextTick(function() {
								refreshContainer('#refreshContainer');
								var controller = true;
								if(res.results.uatm_tbk_item.length < vm.pageSize){
									controller = true;
								} else {
									controller = false;
								}
								endPullupToRefresh('#refreshContainer', controller)
							})
						})
					},
					listopen: function(href){
						if (loginstate) {
							openwind(href);
						} else {
							if (href.indexOf('earning-commission.html') !== -1) {
								openwind(href);
							} else {
								loginfalse()
							}
						}
					},
					customnav: function(id, url, coupon) {
						localStorage.setItem('mallJson', JSON.stringify({
							mallId: id,
							mallURL: url,
							mallcoupon: coupon.substr(coupon.lastIndexOf("元") + - 1)
						}));
						openwind('../mall-home-details.html')
					},
				}
			});
			backHome()
		</script>
	</body>

</html>
